<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <!-- loader-->
    <link href="../static/assets/css/pace.min.css" rel="stylesheet"/>
    <script src="../static/assets/js/pace.min.js"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../static/assets/css/bootstrap.min.css"/>
    <!-- App CSS -->
    <link rel="stylesheet" href="../static/assets/css/app.css"/>
</head>
<body class="bg-theme bg-theme1">
<!-- wrapper -->
<div class="wrapper">
    <div class="section-authentication-login d-flex align-items-center justify-content-center">
        <div class="row">
            <div class="col-12 col-lg-10 mx-auto">
                <div class="card radius-15">
                    <div class="row no-gutters">
                        <div class="col-lg-6">
                            <div class="card-body p-md-5">
                                <div class="text-center">
                                    <h3 class="mt-4 font-weight-bold">注册</h3>
                                </div>
                                <div class="form-group mt-4">
                                    <label>用户名</label>
                                    <input type="text" class="form-control" placeholder="请输入用户名" id="username"/>
                                </div>

                                <div class="form-group">
                                    <label>密码</label>
                                    <div class="input-group" id="show_hide_password">
                                        <input class="form-control border-right-0" type="password" id="password">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>确认密码</label>
                                    <div class="input-group" id="show_hide_password">
                                        <input class="form-control border-right-0" type="password" id="repassword">

                                    </div>
                                </div>

                                <div class="btn-group mt-3 w-100">
                                    <button type="button" class="btn btn-light btn-block" onclick="res()">注册</button>

                                </div>
                                <hr/>
                                <div class="text-center mt-4">
                                    <p class="mb-0">已经有账号了? <a
                                            href="/">登录</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <img src="../static/assets/images/login-images/register-frent-img.jpg"
                                 class="card-img login-img h-100" alt="...">
                        </div>
                    </div>
                    <!--end row-->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end wrapper -->
<!-- JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="../static/assets/js/jquery.min.js"></script>
<script>
    function res() {
        if (document.getElementById('password').value != document.getElementById('repassword').value) {
            alert('两次输入的密码不同')
            location.reload()
        } else {
            var data = {
                'username': document.getElementById('username').value,
                'password': document.getElementById('password').value,
            }
            $.ajax({
                url: "register",
                type: "post",
                data: JSON.stringify(data),
                success: function (e) {
                    alert(e)
                    if (e === '注册成功') {
                        location.href = '/'
                    }
                }
            })
        }
    }


</script>
</body>

</html>